<template>
    <div class="readpage" :bottom="100">
            <el-backtop @click="handleup" ref="btn"></el-backtop>
        <div class="header">
            <img src="../../assets/image/logo.png" alt="">
            <h1>文章详情</h1>
        </div>

        <div class="content">
            <div class="container ql-container ql-snow">
                <h1>{{chaptertitle}}</h1>
                <p class="ql-editor" v-html="chaptercontent"></p>
            </div>
            <div class="footer1">
                <div class="footer1left">
                     <el-button type="info" plain @click="putDianZan">{{bool==0?'点赞':'已点赞'}}</el-button>
                </div>
                <div class="footer1right">
                    <el-button type="warning" plain @click="shoucang">收藏</el-button>
                </div>
            </div>

            <div class="footer">
                <div class="left" @click="pre">
                    <span>上一章</span>
                </div>
                <div class="left" @click="gomulu"><span>目录</span> </div>
                <div class="left" @click="next"><span>下一章</span></div>
            </div>
        </div>

      
    </div>
    
</template>
<script>
export default {
    data(){
        return {
            chaptertitle:'',
            chaptercontent:'',
            chapter:{},
            bool:0
        }
    },
    created(){
        // console.log(this.$route.params)
        this.chapterid=this.$route.params.chapterid

        //获取当前页信息
        this.getchapter()

        // //获取当前的点赞状态
        this.getzanzt()
    },
    beforeDestroy(){
        //直接将收藏过的，保存历史记录
        this.updatachapter()
         //保存历史记录
        this.updatahistory()
    },
    methods:{
        //获取当前的点赞状态
       async getzanzt(){
           let data=await this.axios.get('chapter/getzanzt',{
               params:{
                articleid:this.$store.state.articleid,
                chapterid:this.$store.state.chapteridarr[this.$store.state.chapterid],
                readerid:this.$store.state.readerdata.id,   
               }
           })
        this.bool=data.data.bool
       },


        //提交点赞
        async putDianZan(){
            if(this.bool===0){
            this.bool=1
        }else{
            this.bool=0
        }
        // console.log(this.bool)
            let data=await this.axios.post("chapter/chapterZan",{
                articleid:this.$store.state.articleid,
                chapterid:this.$store.state.chapteridarr[this.$store.state.chapterid],
                readerid:this.$store.state.readerdata.id,
                bool:this.bool
            })
            // this.bool=0
            // console.log(data)
        },

         //保存历史记录
       async updatahistory(){
            let data=await this.axios.post("article/historyarticle",{
                articleid:this.$store.state.articleid,
                readerid:this.$store.state.readerdata.id,
                chapterid:this.$store.state.chapteridarr[this.$store.state.chapterid]
            })
            // console.log(data)
        },

        //直接将收藏过的，保存历史记录
        async updatachapter(){
         let data=await this.axios.post("article/collectarticle2",{
             articleid:this.$store.state.articleid,
             readerid:this.$store.state.readerdata.id,
             chapterid:this.$store.state.chapteridarr[this.$store.state.chapterid]
         })   
        },

        //返回顶部
        handleup(){
            console.log("返回顶部")
        },

        //收藏当前的文章和保存记录
        async shoucang(){
         let data=await this.axios.post('article/collectarticle1',{
             articleid:this.$store.state.articleid,
             readerid:this.$store.state.readerdata.id,
             chapterid:this.$store.state.chapteridarr[this.$store.state.chapterid]
         })  
         this.$message.success("收藏成功")
        },
        //去目录页
        gomulu(){
            this.$router.push(`/chapterlist/${this.$store.state.articleid}`)
        },

        //上一章
        pre(){
            if(this.$store.state.chapterid<=0){
                return this.$message.error("没有上一页了")
            }
           
            this.$store.dispatch("Previouschapter")
            //获取当前的点赞状态
             this.getzanzt()
            setTimeout(()=>{
                this.chaptertitle=this.$store.state.chapterdata.chaptertitle
                this.chaptercontent=this.$store.state.chapterdata.chaptercontent
                // this.chapterid=this.$store.state.chapterdata.chapterid
                // this.getchapter() 
                this.$refs.btn.$el.click()
            },400)

          
        },
        //下一章
        next(){
            // console.log(this.$store.state.chapteridarr)
            if(this.$store.state.chapterid>=this.$store.state.chapteridarr.length-1){
                return this.$message.error("没有下一页了")
            }
            
            this.$store.dispatch("nextchapter")
            //获取当前的点赞状态
             this.getzanzt()
             setTimeout(()=>{
                this.chaptertitle=this.$store.state.chapterdata.chaptertitle
                this.chaptercontent=this.$store.state.chapterdata.chaptercontent
                this.$refs.btn.$el.click()
            },400)

            //获取当前的点赞状态
        this.getzanzt()

        },
        //获取本章内容
        async getchapter(){
            let data=await this.axios.get(`chapter/chapter?chapterid=${this.chapterid}`)
            // console.log(data.data.data[0])
             //将当前阅读的文章id存到store
            this.$store.commit('putarticleid',data.data.data[0].articleid)
            //将当前页的章节id，以数组存储到store中

            //获取文章的全部章节内容
            let data1=await this.axios.get("chapter",{
                params:{
                    articleid:data.data.data[0].articleid,
                    page:1,
                    pageNumber:200
                }
            })
            // console.log(data.data.data)
            let chapteridarr=data1.data.data.map(item=>{
                return item.chapterid
            })
            //保存章节数组到store
            this.$store.commit("putchapteridarr",chapteridarr)

            this.chaptertitle=data.data.data[0].chaptertitle
            this.chaptercontent=data.data.data[0].chaptercontent
            // this.chaptercontent=data.data.data[0].chaptercontent.replace(/<[^>]+>/g, "")
            // console.log(this.chaptercontent)
        }
    }
}
</script>
<style lang="less" scoped>
 .readpage{
     padding-bottom: 50px;
      min-height: 100vh;
      max-width: 100vw;
      overflow: hidden;
     background-color: #e9e3d6;
       .header{
        padding-left: 200px;
        padding-right: 200px;
        height:100px;
        max-width: 100vw;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        position: relative;
        display: flex;
        img{
            flex: 2;
            height: 100px;
            display: inline-block;
        }
        h1{
            flex: 3;
            color: #2ed573;
            display: inline-block;
            text-align: center;
            height:100px;
            line-height: 100px;
            letter-spacing:20px;
        }
    }
    .content{
        width:60%;
        margin:10px auto ;
        .container{
        padding:30px 50px; 
        background-color: #DCD9D4; 
        background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%); 
        background-blend-mode: soft-light,screen;
         }

         .footer1 {
             display: flex;
             padding: 20px 400px;
            .footer1left {
                flex:1;
                text-align: center;
                el-button {

                }
            }

            .footer1right {
                flex:1;
                text-align: center;
               
                el-button {

                }
            }
        }

        .footer {
            display: flex;
            height: 50px;
            background-color: #cdc9c2; 

            .left {
                cursor: pointer;
                flex:1;
                height: 50px;
                line-height: 50px;
                text-align: center;
                border-left:1px solid #888;
                &:nth-of-type(1){
                border: none;

            }
                span {
                    display: inline-block;
                    height: 60%;
                    width: 100%;
                   
                }
                
            }
            .left:hover{
                color: coral;
            }

           
            }
    }
 }
</style>